<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">下拉选项</h5>
        <div class="card-body">
            <p class="text-muted">1. 如果下拉选项过多，可以使用这个组件，可以提供字符串匹配查询选项</p>
            <p class="text-muted">2. 单选支持实时调用接口搜索，多选有独立的搜索组件</p>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header">省市区选择</div>
        <div class="card-body">
            <ts-select-block [(ngModel)]="cityValue" [items]="chinaOptions" placeholder="请选择省市区"
                class="d-inline-block mb-2 mr-2" style="width: 200px"></ts-select-block>
            <ts-select-block [items]="departmentOptions" placeholder="请选择部门" class="d-inline-block mb-2"
                style="width: 200px"></ts-select-block>
            <!-- {{cityValue|json}} -->
            <!-- 已经被弃用的省市区第三方选择插件 -->
            <!-- <div class="form-control position-relative" style="width: 300px">
                <input #cityPicker readonly type="text" style="width: 200px;line-height:1;height:19px;">
            </div>
            <button class="ml-3" tsBtn (click)="getPickerValue()">获取选中的值</button> -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header bg-white">下拉选择</div>
                <div class="card-body">
                    <ts-select [(ngModel)]="selectValue" [items]="['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
                'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
                'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
                'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
                'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon',
                'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga',
                'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome',
                'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart',
                'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław',
                'Zagreb', 'Zaragoza', 'Łódź']"></ts-select>
                    <ts-select class="mt-2" ngModel [disabled]="true" placeholder="Disabled"></ts-select>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header bg-white">多选</div>
                <div class="card-body">
                    <div tsSelects [items]="diySelects" [color]="global.params.color" [(ngModel)]="selectValues"></div>
                    <div class="mt-2" tsSelects [items]="diySelects" [disabled]="true" [color]="global.params.color"
                        [(ngModel)]="selectValues"></div>
                </div>
            </div>
        </div>
    </div>
</div>